<template>
  <div style="padding: 20px">
    <el-card>
      <div slot="header">
        <span>批量添加展位</span>
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px" @click="back"
          >返回</el-button
        >
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          >保存</el-button
        >
      </div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="展区编号">
            <el-select v-model="model" placeholder="A">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展位号">
            <el-input placeholder="" style="width: 10%"></el-input>
            至
            <el-input placeholder="" style="width: 10%"></el-input>
          </el-form-item>
          <el-form-item label="" style="margin-top: 40px">
            <el-button type="primary">保存</el-button>
            <el-button type="primary">继续添加</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span>批量删除展位</span>
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px" @click="back"
          >返回</el-button
        >
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          >保存</el-button
        >
      </div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="展区编号">
            <el-select v-model="model" placeholder="A">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展位号">
            <el-input placeholder="" style="width: 10%"></el-input>
            至
            <el-input placeholder="" style="width: 10%"></el-input>
          </el-form-item>
          <el-form-item label="" style="margin-top: 40px">
            <el-button type="primary">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span>删除展区</span>
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px" @click="back"
          >返回</el-button
        >
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          >保存</el-button
        >
      </div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="展区编号">
            <el-select v-model="model" placeholder="A">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="margin-top: 40px">
            <el-button type="primary">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span>展位图</span>
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px" @click="back"
          >返回</el-button
        >
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          >保存</el-button
        >
      </div>
      <div style="margin-top: 20px">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span>展位情况一览（鼠标点击可删除展区）</span>
      </div>
      <!-- <div>
        <div class="area">
          <ul>
            <li class="select">A区</li>
          </ul>
        </div>
      </div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
};
</script>

<style lang="scss" scoped>
.area {
  padding-top: 25px;
  padding-left: 80px;
  .select {
    background-color: #f60;
    color: #fff;
    border: 1px solid #f50;
  }
}
</style>
